<template>
  <el-form
    class="print-table-config-panel"
    ref="form"
    label-width="0px"
    label-position="left"
    size="mini"
  >
    <div class="print-config-title">{{ $t('数据设置') }}</div>
    <el-form-item class="mt-16">
      <l-select
        :options="textTypeOption"
        :clearable="false"
        valueKey="id"
        labelKey="name"
        v-model="myConfig.table"

        @change="handleChange"
      />
    </el-form-item>
    <div class="print-config-title">{{ $t('大小位置') }}</div>
    <el-row class="mt-16">
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="W" label-width="32px">
          <el-input-number
            v-model="myConfig.width"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="X" label-width="32px">
          <el-input-number
            v-model="myConfig.left"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="H" label-width="32px">
          <el-input-number
            v-model="myConfig.height"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
      </el-col>
      <el-col class="form-item-label-pd8" :span="12">
        <el-form-item label="Y" label-width="32px">
          <el-input-number
            v-model="myConfig.top"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <div class="print-config-title">{{ $t('表格列设置') }}</div>
    <el-collapse
      accordion
      v-for="(item, index) in myConfig.columns"
      :key="index"
    >
      <el-collapse-item>
        <template slot="title">
          <span class="ml-8" style="font-size: 14px;color: #595959;"
            >列{{ index + 1 }}</span
          ><i
            class="el-icon-plus ml-8"
            style="color:#5E95FF"
            @click.stop="handleAddColumn(index)"
          ></i
          ><i
            class="el-icon-copy-document ml-8"
            style="color:#5E95FF"
            @click.stop="handleCopyColumn(item, index)"
          ></i
          ><i
            v-if="myConfig.columns.length > 1"
            class="el-icon-delete ml-8"
            style="color: #f56c6c"
            @click.stop="handleDeleteColumn(index)"
          ></i>
        </template>
        <el-form-item :label="$t('列名')" label-width="40px">
          <el-input v-model="item.label"></el-input>
        </el-form-item>
        <el-form-item :label="$t('字段')" label-width="40px">
          <l-select
            :options="fieldOptions"
            valueKey="id"
            labelKey="name"
            v-model="item.prop"
          />
        </el-form-item>
        <el-form-item :label="$t('列宽')" label-width="40px">
          <el-input-number
            v-model="item.width"
            controls-position="right"
            :min="1"
          />
        </el-form-item>
        <el-form-item :label="$t('对齐')" label-width="40px">
          <l-select
            :clearable="false"
            :options="textAlignOption"
            v-model="item.align"
          />
        </el-form-item>
        <el-form-item :label="$t('大小')" label-width="40px">
          <el-input-number
            v-model="item.fontSize"
            controls-position="right"
            :min="5"
          />
        </el-form-item>
        <el-form-item :label="$t('粗细')" label-width="40px">
          <l-select
            :clearable="false"
            :options="fontWeightOption"
            v-model="item.fontWeight"
          />
        </el-form-item>
        <el-form-item :label="$t('字色')" label-width="40px">
          <l-input-color :notInput="true" v-model="item.color" />
        </el-form-item>
        <el-form-item
          style="margin-bottom: 8px;"
          :label="$t('背景')"
          label-width="40px"
        >
          <l-input-color :notInput="true" v-model="item.backgroundColor" />
        </el-form-item>
      </el-collapse-item>
    </el-collapse>

    <div class="print-config-title mt-16">{{ $t('表头设置') }}</div>
    <el-row class="mt-16">
      <el-col :span="6">
        <el-form-item>
          <el-input-number
            v-model="myConfig.thFontSize"
            controls-position="right"
            :min="5"
          />
        </el-form-item>
      </el-col>
      <el-col :span="17" :offset="1">
        <el-form-item>
          <l-select
            :clearable="false"
            :options="fontWeightOption"
            v-model="myConfig.thFontWeight"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item class="ml-8" :label="$t('高度')" label-width="40px">
      <el-input-number
        v-model="myConfig.thHeight"
        controls-position="right"
        :min="1"
      />
    </el-form-item>
    <el-form-item class="ml-8" :label="$t('字色')" label-width="40px">
      <l-input-color :notInput="true" v-model="myConfig.thColor" />
    </el-form-item>
    <el-form-item class="ml-8" :label="$t('背景')" label-width="40px">
      <l-input-color :notInput="true" v-model="myConfig.thBackgroundColor" />
    </el-form-item>

    <div class="print-config-title">{{ $t('表格设置') }}</div>
    <div class="ml-8 mt-16">{{ $t('文字') }}</div>
    <el-form-item class="mt-8 ml-8">
      <el-col :span="18">
        <el-select :clearable="false" v-model="myConfig.fontFamily">
          <el-option
            v-for="item in fontFamilyOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span :style="{ fontFamily: item.value }">{{ item.label }}</span>
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5" :offset="1">
        <l-input-color :notInput="true" v-model="myConfig.color" />
      </el-col>
    </el-form-item>
    <div class="ml-8 mt-16">{{ $t('行高') }}</div>
    <el-form-item class="ml-8 mt-8">
      <el-input-number
        v-model="myConfig.rowHeight"
        controls-position="right"
        :min="1"
      />
    </el-form-item>

    <div class="ml-8">{{ $t('透明度') }}</div>
    <el-row class="ml-8">
      <el-col :span="18">
        <el-slider size="mini" v-model="myConfig.opacity" />
      </el-col>
      <el-col :span="5" :offset="1">
        <el-input-number
          v-model="myConfig.opacity"
          controls-position="right"
          size="mini"
          :min="0"
          :max="100"
        />
      </el-col>
    </el-row>
    <el-form-item class="ml-8">
      <div style="display: flex">
        <l-checkbox
          :options="[{ label: '背景颜色', value: '1' }]"
          v-model="myConfig.isBackgroundColor"
        />
        <l-input-color
          :notInput="true"
          v-model="myConfig.backgroundColor"
          style="margin-left: 8px"
        />
      </div>
    </el-form-item>
    <div class="ml-8">{{ $t('边框') }}</div>
    <el-form-item class="ml-8 mt-8">
      <l-select
        :clearable="false"
        :options="borderOption"
        v-model="myConfig.borderLine"
      />
    </el-form-item>

    <el-row>
      <el-col class="form-item-label-pd8" :span="10">
        <el-form-item :label="$t('大小')" label-width="50px">
          <el-input-number
            v-model="myConfig.borderSize"
            controls-position="right"
            :min="0"
            style="width: 60px;"
          />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item>
          <l-input-color
            :notInput="true"
            style="margin-left: 8px"
            v-model="myConfig.borderColor"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <div class="print-config-title">{{ $t('跟随移动') }}</div>
    <el-form-item class="mt-16">
      <l-select
        :options="componentsOption"
        v-model="myConfig.components"
        multiple
        @change="handleChange"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import fontFamily from "../../config/fontFamily";
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
    dbtableList: {
      type: Array,
      default: () => [],
    },
    pageComponents: {
      type: Array,
      default: () => [],
    },
    pageConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      textAlignOption: [
        { value: "left", label: this.$t("居左") },
        { value: "center", label: this.$t("居中") },
        { value: "right", label: this.$t("居右") },
      ],
      borderOption: [
        {
          value: "solid",
          label: this.$t("实线"),
        },
        {
          value: "dashed",
          label: this.$t("虚线"),
        },
        {
          value: "dotted",
          label: this.$t("点虚线"),
        },
        {
          value: "double",
          label: this.$t("双实线"),
        },
      ],
      fontFamilyOption: fontFamily,
      fontWeightOption: [
        {
          value: "lighter",
          label: this.$t("细体"),
        },
        {
          value: "normal",
          label: this.$t("正常"),
        },
        {
          value: "bold",
          label: this.$t("粗体"),
        },
      ],
    };
  },
  computed: {
    textTypeOption() {
      return [...this.$deepClone(this.dbtableList)];
    },
    myConfig() {
      return this.config;
    },
    fieldOptions() {
      const table = this.dbtableList.find((t) => t.id == this.myConfig.table);
      if (table) {
        return this.$deepClone(table.children);
      }
      return [];
    },
    componentsOption(){
      let res = [];
      res = this.pageComponents.filter(t=>!t.config.id != this.myConfig.id);
      if(this.pageConfig.isHeaderShow == '1'){
        res = this.pageComponents.filter(t=>!t.config.isHeader);
      }
      return res.map(t=>({value:t.config.id,label:t.config.label}));
    }
  },
  created() {},
  methods: {
    handleAddColumn(index) {
      this.myConfig.columns.splice(index + 1, 0, {
        label: this.$t("新加列"),
        prop: "",
        width: 100,
        align: "center",
        fontSize: 12,
        fontWeight: "normal",
        color: "",
        backgroundColor: "",
      });
    },
    handleDeleteColumn(index) {
      this.myConfig.columns.splice(index, 1);
    },
    handleCopyColumn(item, index) {
      const newItem = this.$deepClone(item);
      newItem.label = `${newItem.label}${this.$t('【复制】')}`;
      this.myConfig.columns.splice(index + 1, 0, newItem);
    },
    handleChange(obj){
      if(obj){
        this.myConfig.label = obj.comment || obj.name;
      }
    },
  },
};
</script>

<style lang="scss">
.print-table-config-panel {
  .el-collapse-item__header {
    height: 40px;
    line-height: 40px;
  }
  .el-collapse-item__content {
    background-color: #00000006 !important;
    padding: 6px 8px 8px 8px !important;
  }
}
</style>
